﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>addpet</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

    <link href="addpet.css" rel="stylesheet" />
    <script src="addpetcodebehind.js"></script>
    <script src="addpet.js"></script>
    <link href="../../css/Microsoft.VisualStudio.Blend.Html.Intrinsic.Grid.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div class="addpet fragment">
        <header aria-label="Header content" role="banner">
            <button class="win-backbutton" aria-label="Back" disabled type="button"></button>
            <h1 class="titlearea win-type-ellipsis" style="height: 90px;">
                <span class="pagetitle">Add Pet</span>
            </h1>
        </header>
        <section aria-label="Main content" role="main">
            <div class="addpet">
                <div id="vetbinding" style="height: 60px; width: 120px;" data-win-control="WinJS.Binding.Template">
                    <div data-win-bind="innerText: clinic"></div>
                </div>
                <div id="petinfo">
                    <div class="inputdivs">
                        <label for="petname">Name: </label>
                        <input type="text" id="petname" class="floatedleft" />
                    </div>
                    <div class="inputdivs">
                        <label for="birthdate">Date of birth: </label>
                        <div data-win-control="WinJS.UI.DatePicker" id="birthdate" class="floatedleft"></div>
                    </div>
                    <div class="inputdivs">
                        <label for="breed">Breed: </label>
                        <select id="breed" class="floatedleft">
                            <option value="dog">Dog</option>
                            <option value="cat">Cat</option>
                        </select>
                    </div>
                    <div class="inputdivs">
                        <label for="gender">Gender</label>
                        <select id="gender" class="floatedleft">
                            <option value="male">Male</option>
                            <option value="female">Female</option>
                        </select>
                    </div>
                    <div class="inputdivs">
                        <label for="barcode">chip/Barcode No: </label>
                        <input type="text" id="barcode" class="floatedleft" />
                    </div>
                    <div class="inputdivs">
                        <label for="color">Color: </label>
                        <input type="text" id="color" class="floatedleft" />
                    </div>
                </div>

                <div class="pic" style="top: 0px;">
                    <img src="#" id="pic" width="300"/>
                </div>
				<button id="takepic" type="button" style="position: relative; width: 140px; height: 32px; left: 80px; top: 22px;">Take picture</button>
                <button id="addpic" type="button" style="position: relative; width: 140px; height: 32px; left: 95px; top: 22px;">Add picture</button>
				<div>
                    <label for="vetslist" style="position: relative; left: 500px; top: -400px;">Veterinaries:</label>
                    <div id="vetslist" style="position: relative; left: 500px; top: -350px;" data-win-control="WinJS.UI.ListView"
                        data-win-options="{
                        itemDataSource: ViewModels.vetList.dataSource,
                        itemTemplate: select('#vetbinding')
                        }">
                    </div>
                </div>
            	
            </div>
        </section>
    </div>
	


</body>
</html>
